워드프레스 홈페이지 제작 시 ie 버전 체크

  • 18 / 12 / 2015
  • by wpresso
  • 0 reply

워드프레스 제작 시 프로그램 개발 시 ie 7, 8, 9 버전들에서 호환성 문제들이 많이 발생합니다.
jquery가 호환이 안되는 부분이 있을 수 있고 IE의 워낙에 방대한 버그로 인해서 크로스 브라우징 문제들도 발생되기 때문에 이런 경우 버전 별로 체크해서 jquery나 css를 커스텀해야 하는 경우가  자주 발생됩니다.

우선 php의 경우 preg_match를 이용하는 방법이 있고
[php]
if(preg_match(‘/(?i)msie [7-8]/’,$_SERVER[‘HTTP_USER_AGENT’])){
// if IE<=8
include ( TEMPLATEPATH . ‘/something.php’ );
exit;
}else{
// if IE>8
//출처 https://stackoverflow.com/a/5302437
}
[/php]

jquery를 이용한 방법은
[php]
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf(‘msie’) != -1) ? parseInt(myNav.split(‘msie’)[1]) : false;
//출처 https://stackoverflow.com/a/15983064
}
[/php]

두가지 방법이 있습니다. 하지만 jquery나 php의 코드 변화에 신경쓸 필요 없이
Html Conditional 테그를 사용하는 것이 가장 안정적인 방법입니다.
워드프레스의 기본 컨디셔널 테그는 ie 7 or 8을 리턴 시켜주는 아래와 같은 코드인데
이것을 살짝 변경하면 문제 많은 ie9까지 포함 시킬 수 있습니다.

워드프레스 기본코드
[php]
<!–[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 7) | !(IE 8) ]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
[/php]

IE9까지 포함 하는 컨디셔널 테그
[php]
<!–[if IE 7]>
<html class="ie ie7 lte9" <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class="ie ie8 lte9" <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 9]>
<html class="ie9 lte9" <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 7) | !(IE 8) | !(IE 9) ]><!–>
<html <?php language_attributes(); ?> lang="ko">
<!–<![endif]–>
[/php]

결과는
ie7 = ie ie7 lte9
ie8 = ie ie8 lte9
ie9 = ie9 lte9 를 html테그 클래스에 추가됩니다.

jquery 사용예
[php]
if ( $("html").hasClass("ie9") ){
//ie 9
}
if( $("html").hasClass("lte9") ){
//ie 9이하
};
[/php]

PHP 컨디셔널 테그
[php]
echo "<!–[if lt IE 9]>";
echo("bed ie");
echo "<![endif]–>";
[/php]

답글쓰기